// 导入 React 的 useEffect 和 useState 钩子
import { useEffect, useState } from 'react'
// 导入组件样式
import styles from './index.module.less'
// 声明全局定时器变量
let timer = null
// 下拉刷新组件
export default function Pull({ children, onLoad, finished, setFinished }) {  
  // 初始化触摸起始Y坐标
  const [startY, setStartY] = useState(0)
  // 初始化触摸移动Y坐标
  const [moveY, setMoveY] = useState(0)
  // 初始化手指下拉的距离
  const [distance, setDistance] = useState(0)
  // 初始化容器下拉的距离
  const [translateY, setTranslateY] = useState(0)
  // 定义最大下拉距离为250px
  const max = 250
  // 定义触发刷新的中间阈值为100px
  const middle = 100
  // 初始化当前状态文本
  const [current, setCurrent] = useState('下拉刷新...')
  // 触摸开始事件处理函数
  const onTouchStart = (e) => {
    // 获取触摸起始的Y轴坐标
    const start_y = e.touches[0].clientY
    // 设置触摸起始Y坐标状态
    setStartY(start_y)
  }
  // 触摸移动事件处理函数
  const onTouchMove = (e) => {
    // 获取触摸移动到的Y轴坐标
    const move_y = e.touches[0].clientY
    // 如果向上滑动，不处理
    if (move_y < startY) {
      return
    }
    // 设置触摸移动Y坐标状态
    setMoveY(move_y)
    // 计算并设置下拉距离
    setDistance(move_y - startY)

    // 如果下拉距离超过中间阈值，改变状态文本为'释放刷新...'
    if (distance >= middle) {
      setCurrent('释放刷新...')
    }
    // 如果下拉距离超过最大限制，不处理
    if (distance > max) {
      return
    }
    // 使用幂函数实现非线性下拉效果（下拉越大，移动速度越慢）
    setTranslateY(distance ** 0.8)
  }
  // 触摸结束事件处理函数
  const onTouchEnd = () => {
    // 如果下拉距离超过中间阈值，触发刷新
    if (distance >= middle) {
      // 改变状态文本为'加载中...'
      setCurrent('加载中...')
      // 启动定时器，使容器缓慢复位
      timer = setInterval(() => {
        setTranslateY((prev) => prev - 5)
      }, 20)
      // 调用刷新回调函数
      onLoad()
      // 重置下拉距离
      setDistance(0)
    }
  }
  // 监听容器移动距离，当接近初始位置时清除定时器
  useEffect(() => {
    if (translateY <= 40) {
      clearInterval(timer)
    }
  }, [translateY])

  // 监听刷新完成状态，重置组件
  useEffect(() => {
    if (finished) {
      // 重置容器位置
      setTranslateY(0)
      // 重置finished状态
      setFinished(false)
      // 重置状态文本
      setCurrent('下拉刷新...')
    }
  }, [finished])

  // DOM元素部分（根据要求不添加注释）
  return (
    <div
      className={styles['pull-wrapper']}
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
      style={{ transform: `translateY(${translateY}px)` }}
    >
      <div className={styles['pull-header']}>
        <p className={styles['pull-header-title']}>{current}</p>
      </div>

      {children}
    </div>
  )
}